import React from 'react'
import css from './Loading.module.less'

const Loading = () => {
  const createCircle = (): React.ReactElement[] => {
    return [1, 2, 3, 4].map((item) => (
      <div key={item} className={css['circle' + item]} />
    ))
  }
  const createSpinnerContainer = (): React.ReactElement[] => {
    return [1, 2, 3].map((item) => {
      return (
        <div
          key={item}
          className={css['spinner-container'] + ' ' + css['container' + item]}
        >
          {createCircle()}
        </div>
      )
    })
  }
  return <div className={css.spinner}>{createSpinnerContainer()}</div>
}

export default Loading
